<template>
  <!-- <van-tabs v-model:active="active" @click-tab="change">
    <van-tab
      v-for="item in cate"
      :key="item._id"
      :title="item.title"
      :name="item._id"
    ></van-tab>
  </van-tabs> -->
  <!-- 用vant的 标签页 写tab栏 默认的active代表下标 加了name属性后active就变成了name属性了-->

  <div>
    <ul class="nav">
      <li
        @click="change(index, item._id)"
        v-for="(item, index) in cate"
        :key="item._id"
        :class="{ active: flag == index }"
      >
        {{ item.title }}
      </li>
    </ul>

    <div>
      <van-card
        v-for="item in result"
        :key="item._id"
        :price="item.price"
        :title="item.title"
        :thumb="item.pic"
      >
        <template #footer>
          <van-button size="mini" @click="add(item)">+</van-button>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";

export default {
  name: "Home",
  components: {},
  setup(props) {
    const store = useStore();
    const data = reactive({
      cate: [],
      //所有的tab分类数据
      list: [],
      //所有的列表数据
      flag: 0,
      //保存选择的tab的下标
      // active: 0,
      result: [],
      //保存筛选后的数据
    });

    axios.get("./cate.json").then((res) => {
      data.cate = res.data.result;
      console.log(res);
    });

    axios.get("./list.json").then((res) => {
      data.list = res.data.result;
      console.log(res);
    });
    //获取json数据

    const change = (index, id) => {
      data.flag = index;
      data.result = data.list.filter((item) => {
        return item.cid == id;
      });
    };
    //筛选需要的数据

    const add = (item) => {
      store.commit("add", item);
    };
    //添加购物车

    return { ...toRefs(data), change, add };
  },
};
</script>
<style lang="scss">
.nav {
  width: 100%;
  height: 40px;
  display: flex;
  background: rgb(73, 21, 80);
  color: #fff;
  li {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .active {
    background: rgb(183, 86, 228);
  }
}
</style>
